<template>
	<view style="height: 100%">
		<!-- pages/addAddress/addAddress.wxml -->
		<view class="container">
			<view class="row v-center">
				<text class="label">收货人：</text>
				<input type="text" @input="userName" :focus="focus1" placeholder="收货人姓名" :value="username" />
			</view>
			<view class="row v-center">
				<text class="label">联系方式：</text>
				<input type="number" @input="telePhone" :focus="focus2" placeholder="收货人手机号" :value="phone" />
			</view>
			<!-- 省市区选择器 -->
			<view class="row v-center section">
				<text class="label">省市区：</text>
				<input class="input" :value="address.province + ' ' + address.city + ' ' + address.county"
					:disabled="true" @tap="chooseRegion" placeholder="省份、城市、区县" />
			</view>
			<view class="row v-center">
				<text class="label">详细地址：</text>
				<input @input="addressFun" type="text" :focus="focus3" placeholder="街道，楼牌号" :value="detail" />
			</view>
		</view>
		<view class="body-view row v-center between">
			<text class="label">默认地址</text>
			<switch :color="color" :checked="Isdefault" @change="switchChange" />
		</view>
		<view @tap="save" :style="'background:' + color" class="mod-block-black">确认</view>

		<view class="region-select" v-if="openSelectRegion">
			<view class="hd v-center between">
				<view class="region-selected">
					<view
						:class="'item ' + (item.code == 0 ? 'disabled' : '') + ' ' + (regionType - 1 === index ? 'selected' : '')"
						@tap="selectRegionType" :data-region-type-index="index"
						v-for="(item, index) in selectRegionList" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view :class="'done ' + (selectRegionDone ? '' : 'disabled')" @tap="doneSelectRegion">确定</view>
			</view>
			<view class="bd">
				<scroll-view scroll-y class="region-list">
					<view :class="'item ' + (item.selected ? 'selected' : '')" @tap="selectRegion"
						:data-region-index="index" v-for="(item, index) in regionList" :key="index">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="bg-mask" @tap="cancelSelectRegion" v-if="openSelectRegion"></view>
	</view>
</template>

<script>
	// pages/addAddress/addAddress.js
	var util = require('../../utils/util.js');
	var api = require('../../utils/prom.js');
	var area = require('../../utils/area.js');
	export default {
		data() {
			return {
				color: app.globalData.color,
				username: '',
				phone: '',

				address: {
					province: '选择省市区',
					city: '',
					county: ''
				},

				Isdefault: true,
				ph: true,
				focus1: true,
				focus2: false,
				focus3: false,
				id: 0,
				areaCode: 0,
				province: '',
				city: '',
				county: '',
				detail: '',
				openSelectRegion: false,

				selectRegionList: [{
						code: 0,
						name: '省份'
					},
					{
						code: 0,
						name: '城市'
					},
					{
						code: 0,
						name: '区县'
					}
				],

				regionType: 1,
				regionList: [],
				selectRegionDone: false,
				Fid: 0,
				region: []
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			var that = this;
			if (!util.isEmpty(options.detail)) {
				uni.setNavigationBarTitle({
					title: '修改收货地址'
				});
				var detail = JSON.parse(unescape(options.detail));
				var Fpcode = that.initCode(0, detail.Fprovince, '');
				var Fccode = that.initCode(1, detail.Fcity, Fpcode);
				var Fzcode = that.initCode(2, detail.Fzone, Fccode);
				console.log(Fpcode);
				console.log(Fccode);
				console.log(Fzcode);

				that.Fid = detail.Fid;
				that.address = {
					province: detail.Fprovince,
					city: detail.Fcity,
					county: detail.Fzone
				};
				that.selectRegionList = [{
						code: Fpcode,
						name: detail.Fprovince
					},
					{
						code: Fccode,
						name: detail.Fcity
					},
					{
						code: Fzcode,
						name: detail.Fzone
					}
				];
				that.username = detail.Fcontacter;
				that.phone = detail.Fmobile;
				that.detail = detail.Faddress;
				that.Isdefault = detail.Fisdefault;

			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {}, 
		methods: {
			initCode: function(index, name, code) {
				var regionList;
				if (index === 0) {
					// 点击省级，取省级
					regionList = area.getList('province');
				} else if (index === 1) {
					// 点击市级，取市级
					regionList = area.getList('city', code.slice(0, 2));
				} else {
					// 点击县级，取县级
					regionList = area.getList('county', code.slice(0, 4));
				}
				var code = '';
				regionList = regionList.map((item) => {
					//标记已选择的
					if (name == item.name) {
						code = item.code;
					}
				});
				return code;
			},

			chooseRegion: function() {
				let that = this;
				this.openSelectRegion = !this.openSelectRegion;

				//设置区域选择数据
				let address = this.address;
				if (address.areaCode > 0) {
					let selectRegionList = this.selectRegionList;
					selectRegionList[0].code = address.areaCode.slice(0, 2) + '0000';
					selectRegionList[0].name = address.province;
					selectRegionList[1].code = address.areaCode.slice(0, 4) + '00';
					selectRegionList[1].name = address.city;
					selectRegionList[2].code = address.areaCode;
					selectRegionList[2].name = address.county;
					let regionList = area.getList('county', address.areaCode.slice(0, 4));
					regionList = regionList.map((item) => {
						//标记已选择的
						if (address.areaCode === item.code) {
							item.selected = true;
						} else {
							item.selected = false;
						}
						return item;
					});
					this.selectRegionList = selectRegionList;
					this.regionType = 3;
					this.regionList = regionList;
				} else {
					let selectRegionList = [{
							code: 0,
							name: '省份'
						},
						{
							code: 0,
							name: '城市'
						},
						{
							code: 0,
							name: '区县'
						}
					];
					this.selectRegionList = selectRegionList;
					this.regionType = 1;
					this.regionList = area.getList('province');
				}
				that.setRegionDoneStatus();
			},

			setRegionDoneStatus: function() {
				let that = this;
				let doneStatus = that.selectRegionList.every((item) => {
					return item.code != 0;
				});
				that.selectRegionDone = doneStatus;
			},

			chooseRegion: function() {
				let that = this;
				this.openSelectRegion = !this.openSelectRegion;

				//设置区域选择数据
				let address = this.address;
				if (address.areaCode > 0) {
					let selectRegionList = this.selectRegionList;
					selectRegionList[0].code = address.areaCode.slice(0, 2) + '0000';
					selectRegionList[0].name = address.province;
					selectRegionList[1].code = address.areaCode.slice(0, 4) + '00';
					selectRegionList[1].name = address.city;
					selectRegionList[2].code = address.areaCode;
					selectRegionList[2].name = address.county;
					let regionList = area.getList('county', address.areaCode.slice(0, 4));
					regionList = regionList.map((item) => {
						//标记已选择的
						if (address.areaCode === item.code) {
							item.selected = true;
						} else {
							item.selected = false;
						}
						return item;
					});
					this.selectRegionList = selectRegionList;
					this.regionType = 3;
					this.regionList = regionList;
				} else {
					let selectRegionList = [{
							code: 0,
							name: '省份'
						},
						{
							code: 0,
							name: '城市'
						},
						{
							code: 0,
							name: '区县'
						}
					];
					this.selectRegionList = selectRegionList;
					this.regionType = 1;
					this.regionList = area.getList('province');

				}
				this.setRegionDoneStatus();
			},

			selectRegionType: function(event) {
				let that = this;
				let regionTypeIndex = event.target.dataset.regionTypeIndex;
				let selectRegionList = that.selectRegionList;

				//判断是否可点击
				if (regionTypeIndex + 1 == this.regionType || (regionTypeIndex - 1 >= 0 && selectRegionList[
						regionTypeIndex - 1].code <= 0)) {
					return false;
				}
				let selectRegionItem = selectRegionList[regionTypeIndex];
				let code = selectRegionItem.code;
				let regionList;
				if (regionTypeIndex === 0) {
					// 点击省级，取省级
					regionList = area.getList('province');
				} else if (regionTypeIndex === 1) {
					// 点击市级，取市级
					regionList = area.getList('city', code.slice(0, 2));
				} else {
					// 点击县级，取县级
					regionList = area.getList('county', code.slice(0, 4));
				}
				regionList = regionList.map((item) => {
					//标记已选择的
					if (that.selectRegionList[regionTypeIndex].code == item.code) {
						item.selected = true;
					} else {
						item.selected = false;
					}
					return item;
				});
				this.regionList = regionList;
				this.regionType = regionTypeIndex + 1;
				this.setRegionDoneStatus();
			},

			selectRegion: function(event) {
				let that = this;
				let regionIndex = event.target.dataset.regionIndex;
				let regionItem = this.regionList[regionIndex];
				let regionType = this.regionType;
				let selectRegionList = this.selectRegionList;
				selectRegionList[regionType - 1] = regionItem;
				if (regionType == 3) {
					this.selectRegionList = selectRegionList;
					let regionList = that.regionList.map((item) => {
						//标记已选择的
						if (that.selectRegionList[that.regionType - 1].code == item.code) {
							item.selected = true;
						} else {
							item.selected = false;
						}
						return item;
					});
					this.regionList = regionList;
					this.setRegionDoneStatus();
					return;
				}

				//重置下级区域为空
				selectRegionList.map((item, index) => {
					if (index > regionType - 1) {
						item.code = 0;
						item.name = index == 1 ? '城市' : '区县';
					}
					return item;
				});

				this.selectRegionList = selectRegionList;
				this.regionType = regionType + 1;

				let code = regionItem.code;
				let regionList = [];
				if (regionType === 1) {
					// 点击省级，取市级
					regionList = area.getList('city', code.slice(0, 2));
				} else {
					// 点击市级，取县级
					regionList = area.getList('county', code.slice(0, 4));
				}

				this.regionList = regionList;

				this.setRegionDoneStatus();
			},

			doneSelectRegion: function() {
				if (this.selectRegionDone === false) {
					return false;
				}
				let address = this.address;
				let selectRegionList = this.selectRegionList;
				address.province = selectRegionList[0].name;
				address.city = selectRegionList[1].name;
				address.county = selectRegionList[2].name;
				address.areaCode = selectRegionList[2].code;

				this.address = address;
				this.openSelectRegion = false;
			},

			cancelSelectRegion: function() {

				this.openSelectRegion = false;
				this.regionType = this.regionDoneStatus ? 3 : 1;
			},

			/*收货人*/
			userName: function(e) {
				var that = this;
				that.userName = e.detail.value;
			},

			/*联系方式*/
			telePhone: function(e) {
				var that = this;
				that.phone = e.detail.value;
			},

			//详细地址
			addressFun: function(e) {
				var that = this;
				that.detail = e.detail.value;
			},

			/*设为默认 */
			switchChange: function(e) {
				var that = this;
				that.Isdefault = e.detail.value;
			},

			//保存按钮/收货地址新增
			save: function() {
				var that = this;
				if (that.username == '') {
					uni.showToast({
						title: '请填写收货人'
					});
					that.focus1 = true;
				} else if (that.phone == '') {
					uni.showToast({
						title: '请填写手机号'
					});
					that.focus2 = true;
				} else if (!/^1[0-9]{10}$/.test(that.phone)) {
					uni.showToast({
						title: '手机号码格式错误！'
					});
					that.focus2 = true;
					that.phone = '';
				} else if (that.selectRegionList.length == 0) {
					uni.showToast({
						title: '请选择城市'
					});
				} else if (that.detail == '') {
					uni.showToast({
						title: '请填写地址'
					});
					that.focus3 = true;
				} else {
					var param = {
						Fid: that.Fid,
						Fcontacter: that.username,
						Fisdefault: that.Isdefault,
						Fprovince: that.selectRegionList[0].name,
						Fcity: that.selectRegionList[1].name,
						Fzone: that.selectRegionList[2].name,
						Faddress: that.detail,
						Fmobile: that.phone
					};
					if (that.Isdefault) {
						uni.removeStorageSync('addressInfo');
					}
					var url = 'SpAddress?token=' + uni.getStorageSync('token') + '&action=add';
					if (that.Fid != 0) {
						url = 'SpAddress?token=' + uni.getStorageSync('token') + '&action=edit';
					}
					api.request(url, 'post', param, function(res) {
						uni.showToast({
							title: '新增成功！'
						});
						uni.navigateBack({
							delta: 1
						});
					});
				}
			},

		 
		}
	};
</script>
<style>
	@import './addAddress.css';
</style>